﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>课程信息</title>
    <link href="~/CSS/bootstrap.css" rel="stylesheet" />
    <link href="~/CSS/font-awesome.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Js/bootstrap/bootstrap.js"></script>
    <script src="~/Js/plugin/jquery-form/jquery-form.min.js"></script>
    <!--Jcrop-->
    <link href="~/CSS/Jcrop/crop.min.css" rel="stylesheet" />
    <link href="~/CSS/Jcrop/fineuploader.css" rel="stylesheet" />
    <link href="~/CSS/Jcrop/jquery.Jcrop.min.css" rel="stylesheet" />


    <script src="~/Scripts/Jcrop/jquery.fineuploader-3.1.min.js"></script>
    <script src="~/Scripts/Jcrop/jquery.Jcrop.min.js"></script>
    <script src="~/Scripts/Jcrop/crop.js"></script>

</head>
<body>
    <!--Course Message-->
    <div style="margin: 10px; width: 900px; height: auto;">
        @foreach (var item in ViewBag.CourseList)
        {
            <div class="col-sm-6 col-md-3" style="float: left; margin-top: 5px;">
                <a href="OutlineShow?CourseId=@item.Id" class="thumbnail">


                    @{
            string tmpUrl = (String.IsNullOrEmpty(item.SImgUrl) ? "/img/demo/m2.jpg" : item.SImgUrl);
                    }
                    <img alt="课程图像" style="height: 150px; width: 100%; display: block;" src='@tmpUrl' >
                </a>
                <div class="caption">
                    <h3><a href="OutlineShow?CourseId=@item.Id">@item.SCourseName</a></h3>
                    <h6 style="color: blue;">@item.STeacherName

                        <a href="#myModal" data-toggle="modal">
                            <button class="btn pull-right" type="button" style="height: 20px; padding: 0;" title="上传封面图片"
                                 value="@item.Id" onclick="showUpladDiv(@item.Id)">
                                                                                              
                                <i class="fa fa-upload "></i></button>
                        </a>

                    </h6>


                    <div style="height: 55px; overflow: hidden;">
                        <p>@Html.Raw(@item.SIntro)</p>
                    </div>
                </div>
            </div>           
        }
    </div>
    <!--Course Message end-->

    <!--图像上传-->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 600px; margin: 2% auto; height: 550px;overflow:hidden;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 id="myModalLabel"><strong>修改课程封面图像</strong></h4>
            </div>
            <div class="modal-body" style="height: 600px;">

                <div id="jquery-wrapped-fine-uploader"></div>
                <div id="message"></div>
                <div id="crop_wrap">
                    <div id="crop_holder">
                        <div id="crop_area" class="border">
                            <img id="crop_image" alt="" src="" class="preview-image" />
                        </div>                        
                    </div>
                    
                    <div id="crop_operation" style="display: none;">
                        <form id="form_crop" action="/Api/Common/CutCourseImage" method="post" name="form_crop">
                            <input type="hidden" name="x" id="x"/>
                            <input type="hidden" name="y" id="y"/>
                            <input type="hidden" name="w" id="w"/>
                            <input type="hidden" name="h" id="h" />
                            <input type="hidden" name="imgsrc" id="imgsrc" />

                            <input type="hidden" name="CourseID" id="CourseID" />
                            <input id="crop_operation_submit" name="crop_operation_submit" type="submit" value="裁切并保存" /><span id="crop_operation_msg" style="display: none" class="green"></span>
                        </form>
                    </div>
                    <div id="croped_message" class="green"></div>
                </div>
                
            </div>
        </div>
    </div>


    <script type="text/javascript">

        function showUpladDiv(id) {
            //更新 提交的id 

            $("#CourseID").val(id);

        }


    </script>
</body>
</html>
